<template>
  <el-date-picker
    v-model="input"
    type="daterange"
    :range-separator="itemConfig.rangeSeparator"
    :start-placeholder="itemConfig.startPlaceholder"
    :end-placeholder="itemConfig.endPlaceholder"
    :style="itemConfig.style"
    format="YYYY/MM/DD"
    value-format="YYYY/MM/DD"
    @change="handleUpdate"
  />
</template>

<script lang="ts" setup>
  import { ref, PropType, watch, toRefs } from 'vue';
  import { excempleDataRange } from '../dataExcemple';
  import { DataRangeItem } from '../common-form-type';

  const props = defineProps({
    itemConfig: {
      type: Object as PropType<DataRangeItem>,
      default: (): DataRangeItem => excempleDataRange,
    },
    itemValue: {
      type: [Number, String, Boolean, Array],
      default: '',
    },
  });

  const { itemConfig, itemValue } = toRefs(props);
  const input = ref(itemValue.value);

  watch(itemValue, (v) => {
    input.value = v;
  });

  const emit = defineEmits({
    update: null,
  });

  const handleUpdate = () => {
    emit('update', { val: input.value, prop: itemConfig.value.prop });
  };
</script>
